/*!*********************************************************************************
 * X2Engine Open Source Edition is a customer relationship management program developed by
 * X2 Engine, Inc. Copyright (C) 2011-2019 X2 Engine Inc.
 * 
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License version 3 as published by the
 * Free Software Foundation with the addition of the following permission added
 * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
 * IN WHICH THE COPYRIGHT IS OWNED BY X2ENGINE, X2ENGINE DISCLAIMS THE WARRANTY
 * OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
 * 
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
 * details.
 * 
 * You should have received a copy of the GNU Affero General Public License along with
 * this program; if not, see http://www.gnu.org/licenses or write to the Free
 * Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
 * 02110-1301 USA.
 * 
 * You can contact X2Engine, Inc. P.O. Box 610121, Redwood City,
 * California 94061, USA. or at email address contact@x2engine.com.
 * 
 * The interactive user interfaces in modified source and object code versions
 * of this program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU Affero General Public License version 3.
 * 
 * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
 * these Appropriate Legal Notices must retain the display of the "Powered by
 * X2 Engine" logo. If the display of the logo is not reasonably feasible for
 * technical reasons, the Appropriate Legal Notices must display the words
 * "Powered by X2 Engine".
 **********************************************************************************/




$backgroundColor: lighten($lightGray, 12%);
$verticalSpacing: 8px;

@mixin round-icon-button($diameter) {
    width: $diameter;
    height: $diameter;
    line-height: $diameter;
    border: 1px solid $borderColor;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    background: $lightGray;
    color: darken($lightGray, 17%);
}

.profile-mobilePublisher, .profile-mobileCheckInPublisher {
    background: white;
    /*.photo-attachments-container {
        display: inline-block;
        position: relative;
        .photo-attachment {
            max-width: 100%;
            @media (min-width: 500px) {
                max-width: 500px;
            }
            //max-height: 400px;
            img {
            }
        }
        .remove-attachment-button {
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 10px;
            color: lighten(black,20%);
            //border: 2px solid black;
            text-align: center;
            //border-radius: 50%;
            //width: 20px;
            //height: 20px;
            line-height: 20px;
        }
    }
    .audio-attachments-container {
        display: inline-block;
        position: relative;
        .audio-attachment {
            max-width: 100%;
            @media (min-width: 500px) {
                max-width: 500px;
            }
            //max-height: 400px;
            img {
            }
        }
        .remove-attachment-button {
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 10px;
            color: lighten(black,20%);
            //border: 2px solid black;
            text-align: center;
            //border-radius: 50%;
            //width: 20px;
            //height: 20px;
            line-height: 20px;
        }
    }
    .video-attachments-container {
        display: inline-block;
        position: relative;
        .video-attachment {
            max-width: 100%;
            @media (min-width: 500px) {
                max-width: 500px;
            }
            //max-height: 400px;
            img {
            }
        }
        .remove-attachment-button {
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 10px;
            color: lighten(black,20%);
            //border: 2px solid black;
            text-align: center;
            //border-radius: 50%;
            //width: 20px;
            //height: 20px;
            line-height: 20px;
        }
    }*/
}


.profile-mobileActivity, .profile-mobileViewEvent, .profile-mobilePublisher, .profile-mobileCheckInPublisher {

#header {
    .post-event-button {
        @include header-text-button;
    }
}

background: $backgroundColor;

.record-list-item {
    background: white;
    padding: 15px 0; 
    & > *:not(.event-attachments) {
        padding-left: 10px;
        padding-right: 10px;
    }
    cursor: default;
    &.more-button {
        cursor: pointer;
    }
    overflow-y: hidden;
    height: auto;
    margin-bottom: 10px;
    border-top: 1px solid $lightGray;
    @include box-shadow(0px 1px 2px lighten($borderColor, 3%));
}

.event-publisher {
    background: white;
    padding: 15px 10px;
    height: 100%;
    position: relative;
    .avatar {
        top: 15px;
        left: 10px;
        display: block;
        float: left;
        position: absolute;
    }
    textarea.event-text-box {
        width: 100%;
        margin-left: 55px;
        margin-top: 12px;
        padding: 0;
        padding-right: 65px;
        border: none;
    }
    textarea.event-text-box-location {
        width: 100%;
        margin-left: 55px;
        margin-top: 12px;
        padding: 0;
        padding-right: 65px;
        border: none;
    }
}

.event-publisher-dummy {
    cursor: pointer;
    & > * {
        display: inline-block;
        vertical-align: top;
    }
    .dummy-publisher-input {
        line-height: 50px;
        margin-left: 10px;
        color: $subduedTextColor;
    }
}

@include avatar;

.event-view {
}

.event-view, .activity-feed {
    a {
        text-decoration: none;
    }
    .record-list-item {
        .event-author {
            margin-bottom: $verticalSpacing;
            & > * {
                display: inline-block;
                vertical-align: top;
            }
            .author-name, .recipient-name {
                line-height: 45px;
                margin-left: 10px;
                a {
                    text-decoration: none;
                    color: $text
                }
            }
            .recipient-name {
                a {
                    color: $subduedTextColor;
                }
                &::before {
                    content: '\0025B6'; // right-pointing triangle
                    font-size: 13px;
                    color: darken($gray, 10%);
                    position: relative;
                    top: -3px;
                    margin-right: 5px;
                }
            }
        }
        .event-text {
            margin-bottom: $verticalSpacing;
        }
        .event-time {
            color: $subduedTextColor;
        }
        .event-attachments {
            /*@include photo-attachment;
            @include audio-attachment;
            @include video-attachment;*/
        }
        .bottom-bar {
            & > * {
                display: inline-block;
            }
            .controls {
                float: right;
                & > * {
                    display: inline-block;
                    vertical-align: middle;
                }
                .comment-count, .comments {
                    color: $subduedTextColor;
                }
                .comments {
                    & > div {
                        vertical-align: middle;
                        display: inline-block;
                        @include round-icon-button(25px);
                        i {
                            position: relative;
                            top: -2px;
                            left: 1px;
                        }
                    }
                }
                .comment-count {
                    margin-left: 3px;
                    font-size: 14px;
                    width: 20px;
                }
            }
        }
    }
    .more-button {
        margin-bottom: 0px;
        border-bottom: none;
    }
}

.event-view {
    .record-list-item {
        @include box-shadow(none);
        border-bottom: 1px solid $lightGray;
        border-top: none;
        margin-bottom: 0;
    }
    .comment-list-view {
        .items {
            .empty {
                display: none;
            }
        }
    }
    .comment-publisher {
        form {
            position: relative;
            /*.photo-attachments-container {
                .photo-attachment {
                }
            }
            .audio-attachments-container {
                .audio-attachment {
                }
            }
            .video-attachments-container {
                .video-attachment {
                }
            }*/
            .photo-attach-button {
                display: none !important;
                cursor: pointer;
                vertical-align: middle;
                float: left;
                position: relative;
                top: -4px;
                font-size: 23px;
                margin-right: 10px;
                i {
                }
                & + .ui-input-text {
                    width: auto;
                    overflow: hidden;
                    margin-right: 60px;
                    input::-webkit-input-placeholder {
                        font-size: $fontSize;
                    }
                    border: none;
                    line-height: normal;
                    input {
                        padding-left: 0;
                        padding-right: 0;
                    }
                }
            }
            .location-attach-button {
                display: none !important;
                cursor: pointer;
                vertical-align: middle;
                float: left;
                position: relative;
                top: -4px;
                font-size: 23px;
                margin-right: 10px;
                i {
                }
                & + .ui-input-text {
                    width: auto;
                    overflow: hidden;
                    margin-right: 60px;
                    input::-webkit-input-placeholder {
                        font-size: $fontSize;
                    }
                    border: none;
                    line-height: normal;
                    input {
                        padding-left: 0;
                        padding-right: 0;
                    }
                }
            }
            .submit-button {
                position: absolute;
                top: -4px;
                right: 0;
                cursor: pointer;
                float: right;
                color: $linkColor;
                padding: 0 10px;
            }
        }
    }
}

}

